* {
    margin: 0px;
    padding: 0px;
}
#wrap {
    width: 100%;
    height: auto;
    .header {
        width: 100%;
        height: (50rem/15);
        box-sizing: border-box;
        padding: (8rem/15) (14rem/15);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            width: (70rem/15);
            img:nth-of-type(1) {
                width: (12rem/15);
                height: (13.6rem/15);
                vertical-align: middle;
            }
            span {
                font-size: (16rem/15);
                font-weight: 700;
            }
            img:nth-of-type(2) {
                width: (10rem/15);
                height: (6rem/15);
                vertical-align: (2rem/15);
            }

        }
        .right {
            width: (262rem/15);
            height: (30rem/15);
            background-color: skyblue;
            border-radius: (6rem/15);
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: (13rem/15);
            background-color: #f5f5f5;
            img {
                width: (13rem/15);
                height: (13rem/15);
                margin-right: (10rem/15);
            }
            span {
                font-size: (14rem/15);
                color: #999;
            }
        }
    }
    .list {
        width: 100%;
        height: (90rem/15);
        overflow-x: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        ul {
            list-style: none;
            width: (975rem/15);
            height: (90rem/15);
            & > li {
                    float: left;
                    width: (75rem/15);
                    height: (76rem/15);
                    text-align: center;
                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    text-decoration: none;
                    img {
                        width: (60rem/15);
                        height: auto;
                    }
                    p {
                        font-size: (12rem/15);
                        color: #666;
                    }
                }
            }
        }
        
    }
    .qiang {
        width: 100%;
        height: (47rem/15);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: (17rem/15) (17rem/15) (8rem/15) (19rem/15);
        & > img {
            width: (80rem/15);
            height: (16rem/15);
        }
        div {
            width: (74rem/15);
            height: (22rem/15);
            background-color: green;
            border-radius: (11rem/15);
            background-color: #f5f5f5;
            box-sizing: border-box;
            padding-left: (5rem/15);
            display: flex;
            align-items: center;
            span {
                font-size: (12rem/15);
                color: #333;
            }
            & > img {
                width: (5rem/15);
                height: (6rem/15);
                margin-left: (3rem/15);
            }
        }
    }
    .img-area {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 0 (15rem/15);
        .top {
            width: 100%;
            height: (147rem/15);
            display: flex;
            justify-content: space-between;
            border: (0.5rem/15) solid rgba(0,0,0,.1);
            border-radius: (6rem/15);
            .zhuliye {
                width: (235rem/15);
                height: (147rem/15);
                background-color: yellow;
                box-sizing: border-box;
                padding: (10rem/15);
                display: flex;
                justify-content: space-between;
                align-content: space-between;
                flex-wrap: wrap;
                background: url(https://p0.meituan.net/scarlett/8ce49a7c0bf78e2465ed1f335d1e4c7867922.png) no-repeat 50%/100% 100%;
                border-radius: 0 (6rem/15) (6rem/15) 0;
                & > div:nth-of-type(1) {
                    width: (215rem/15);
                    height: (65rem/15);
                    p:nth-of-type(1) {
                        font-size: (15rem/15);
                        font-weight: 700;
                        color: #fff;
                    }
                    p:nth-of-type(2) {
                        font-size: (12rem/15);
                        color: #fff;
                    }
                }
                & > div:nth-of-type(2) {
                    width: 100%;
                    height: (26rem/15);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    & > div:nth-of-type(1) {
                        width: (56rem/15);
                        height: (16rem/15);
                        background-color: #f0f0f0;
                        font-size: (11rem/15);
                        font-weight: 700;
                        color: #f55d48;
                        border-radius: (5rem/15);
                        text-align: center;
                        line-height: (16rem/15);
                    }
                    & > div:nth-of-type(2) {
                        width: (66rem/15);
                        height: (25rem/15);
                        border-radius: (16rem/15);
                        background-color: #fff;
                        font-size: (13rem/15);
                        line-height: (25rem/15);
                        color: #f03d37;
                        display: flex;
                        justify-content: center;
                        font-weight: 700;
                        align-items: center;
                        img {
                            width: (5rem/15);
                            height: (8rem/15);
                            margin-left: (3rem/15);
                        }
                    }
                }
            }
            & > img {
                width: (110rem/15);
                height: 100%;
            }
        }
        .middle {
            width: 100%;
            height: (209rem/15);
            display: flex;
            justify-content: space-between;
            list-style: none;
            margin-top: (10rem/15);
            li:nth-of-type(2) {
                div:nth-of-type(1) {
                    width: (51rem/15);
                    background: linear-gradient(270deg,#ffa30f,#ff7d3d);
                }
            }
            li:nth-of-type(3) {
                div:nth-of-type(1) {
                    width: (67rem/15);
                    background: linear-gradient(270deg,#f037c6,#a664ff);
                }
            }
            li {
                width: (110rem/15);
                height: 100%;
                img {
                    width: (110rem/15);
                    height: (146rem/15);
                    border-radius: (6rem/15);
                }
                div:nth-of-type(1) {
                    width: (76rem/15);
                    height: (16rem/15);
                    border-radius: (5rem/15);
                    line-height: (16rem/15);
                    background: linear-gradient(135deg,#ff7142,#ff0b0b);
                    font-size: (10rem/15);
                    color: #fff;
                    display: flex;
                    font-weight: 700;
                    margin-top: (6rem/15);
                    img {
                        width: (16rem/15);
                        height: (16rem/15);
                    }
                }
                div:nth-of-type(2) {
                    width: 100%;
                    height: (36rem/15);
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical; 
                    font-size: (13rem/15);
                    font-weight: 700;
                    color: #333;
                    margin-top: (4rem/15);
                    line-height: (18rem/15);
                }
            }
        }
        .bottom {
            width: (345rem/15);
            height: (60rem/15);
            border-radius: (6rem/15);
            margin-top: (25rem/15);
            position: relative;
            overflow: hidden;
            .focus {
                width: 500%;
                height: 100%;
                list-style: none;
                position: absolute;
                left: (-345rem/15);
                transition: .5s;
                li {
                    width: (345rem/15);
                    height: 100%;
                    float: left;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: (6rem/15);
                    }
                }
            }
            ol {
                list-style: none;
                position: absolute;
                bottom: (5rem/15);
                right: (5rem/15);
                li {
                    width: (5rem/15);
                    height: (5rem/15);
                    background-color: red;
                    display: inline-block;
                    transition: .3s;
                    border-radius: (2rem/15);
                }
                .current {
                    width: (10rem/15);
                }
            }
        }
    }
    .daka {
       font-size: (16rem/15);
       font-weight: 700;
       color: #333;
       box-sizing: border-box;
       padding: (25rem/15) (15rem/15) (8rem/15) (15rem/15);
    }
    .star-list {
        width: 100%;
        height: (99rem/15);
        overflow-x: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        ul {
            width: (1100rem/15);
            height: (95rem/15);
            padding: 0 (15rem/15);
            list-style: none;
            box-sizing: border-box;
            li {
                float: left;
                width: (72rem/15);
                height: (92rem/15);
                text-align: center;
                margin: (2rem/15) (12rem/15) 0 0;
                img {
                    width: (50rem/15);
                    height: (50rem/15);
                    border-radius: 50%;
                }
                p:nth-of-type(1) {
                    font-size: (13rem/15);
                    font-weight: 700;
                    color: #333;
                    margin-top: (8rem/15);
                }
                p:nth-of-type(2) {
                    font-size: (11rem/15);
                    color: #999;
                    margin-top: (2rem/15);
                }
            }
        }
        
    }
    .look {
        width: 100%;
        height: (57rem/15);
        box-sizing: border-box;
        padding: (25rem/15) (15rem/15) (8rem/15) (15rem/15);
        font-size: (16rem/15);
        font-weight: 700;
    }
    .recommed {
        width: 100%;
        height: (183rem/15);
        overflow-x: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        ul {
            width: (1005rem/15);
            height: (183rem/15);
            box-sizing: border-box;
            padding: 0 (15rem/15);
            list-style: none;
            li {
                float: left;
                width: (100rem/15);
                height: 100%;
                border-radius: (6rem/15);
                margin-right: (8rem/15);
                div:nth-of-type(1) {
                    width: (100rem/15);
                    height: (50rem/15);
                    box-sizing: border-box;
                    padding: (7rem/15) 0 0 (9rem/15);
                    p:nth-of-type(1) {
                        font-size: (14rem/15);
                        font-weight: 700;
                        color: #fff;
                    }
                    p:nth-of-type(2) {
                        font-size: (12rem/15);
                        color: #fff;
                    }
                }
                div:nth-of-type(2) {
                    width: (100rem/15);
                    height: (134rem/15);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
        }
        
    }
        li.one {
            background: rgba(178, 178, 178,.5);
        }
        li.two {
            background: rgba(147, 136, 84,.5);
        }
        li.three {
            background: rgba(170, 145, 117,.5);
        }
    }
    .tuijian {
        width: 100%;
        height: (57rem/15);
        box-sizing: border-box;
        padding: (25rem/15) (15rem/15) (8rem/15) (15rem/15);
        font-size: (16rem/15);
        font-weight: 700;
    }
    .show {
        width: 100%;
        height: (344rem/15);
        padding: 0 (15rem/15) 0 (15rem/15);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        ul {
            width: (168rem/15);
            height: 190rem;
            list-style: none;
        }
        ul:nth-of-type(1) {
            li {
                border: (.5rem/15) solid rgba(0,0,0,.15);
                width: 100%;
                height: (344rem/15);
                border-radius: (12rem/15);
                margin-bottom: (10rem/15);
                img {
                    width: 100%;
                    height: (225rem/15);
                    border-radius: (12rem/15) (12rem/15) 0 0;
                }
                & > div {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 (10rem/15);
                }
                div:nth-of-type(1) {
                    height: (38rem/15);
                    font-size: (13rem/15);
                    font-weight: 700;
                    color: #333;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    line-height: (19rem/15);
                    margin-top: (6rem/15);
                    margin-bottom: (4rem/15);
                }
                div:nth-of-type(2) {
                    color: #ff913d;
                    span:nth-of-type(1) {
                        font-size: (12rem/15);
                        font-family: "MaoYanHeiTi-H";
                        margin-right: (5rem/15);
                        font-weight: 500;
                    }   
                    span:nth-of-type(2) {
                        font-size: (10rem/15);
                    }
                }
                div:nth-of-type(3) {
                    font-size: (12rem/15);
                    color: #999;
                    line-height: (10rem/15);
                    margin-top: (4rem/15);
                    span:nth-of-type(1) {
                        font-size: (16rem/15);
                        font-weight: 700;
                    }
                }
                div:nth-of-type(4) {
                    color: #f03d37;
                    margin-top: (7rem/15);
                    span:nth-of-type(1) {
                        font-size: (16rem/15);
                        font-weight: 700;
                        margin-right: (3rem/15);
                    }
                    span:nth-of-type(2) {
                        font-size: (12rem/15);
                        font-weight: 400;
                    }
                }
            }
        }
        .right {
            .short {
                width: 100%;
                height: (224rem/15);
                border-radius: (12rem/15);
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: (12rem/15);
                }
            }
            li {
                border: (.5rem/15) solid rgba(0,0,0,.15);
                width: 100%;
                height: (344rem/15);
                border-radius: (12rem/15);
                margin-bottom: (10rem/15);
                img {
                    width: 100%;
                    height: (225rem/15);
                    border-radius: (12rem/15) (12rem/15) 0 0;
                }
                & > div {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 (10rem/15);
                }
                div:nth-of-type(1) {
                    height: (38rem/15);
                    font-size: (13rem/15);
                    font-weight: 700;
                    color: #333;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    line-height: (19rem/15);
                    margin-top: (6rem/15);
                    margin-bottom: (4rem/15);
                }
                div:nth-of-type(2) {
                    color: #ff913d;
                    span:nth-of-type(1) {
                        font-size: (12rem/15);
                        font-family: "MaoYanHeiTi-H";
                        margin-right: (5rem/15);
                        font-weight: 500;
                    }   
                    span:nth-of-type(2) {
                        font-size: (10rem/15);
                    }
                }
                div:nth-of-type(3) {
                    font-size: (12rem/15);
                    color: #999;
                    line-height: (10rem/15);
                    margin-top: (4rem/15);
                    span:nth-of-type(1) {
                        font-size: (16rem/15);
                        font-weight: 700;
                    }
                }
                div:nth-of-type(4) {
                    color: #f03d37;
                    margin-top: (7rem/15);
                    span:nth-of-type(1) {
                        font-size: (16rem/15);
                        font-weight: 700;
                        margin-right: (3rem/15);
                    }
                    span:nth-of-type(2) {
                        font-size: (12rem/15);
                        font-weight: 400;
                    }
                }
            }
        }
    }
}